import React,{Component} from 'react';
import Card from '../../../widget/card/card.jsx';
import {
  Link
} from 'react-router-dom';
import './companyproduct.scss';
import LazyLoad from 'react-lazyload';
import { getShopGoods } from 'api/company.js';
export default class Componentproduct extends Component{
	constructor (props) {
		super(props)
		this.state={
			color3:'',
			productList:[],
			sort:1,
			titleList: ['综合', '最新' ,'价格'],
			list: 0,
			currentPage: 0,
      lastPage: 0
		}
	}
	show (index) {
		this.setState({
			list: index
		}, () => {
			if (this.state.list === 0) {
				this.setState({
					sort: 1,
					color3: '',
					productList:[]
				}, () => {
					this._getShopGoods(this.state.sort,1)
				})
			} else if (this.state.list === 1) {
				this.setState({
					sort: 2,
					color3: '',
					productList:[]
				}, () => {
					this._getShopGoods(this.state.sort,1)
				})
			} else {
				this.setState({
					color3:this.state.color3==='glyphicon glyphicon-down active' ? 'glyphicon glyphicon-up active' : 'glyphicon glyphicon-down active',
					sort:this.state.sort === 4 ? 5 : 4,
					productList:[]
				}, () => {
					this._getShopGoods(this.state.sort,1)
				})
			}
		})
	}
	_getShopGoods (num, num1) { //店铺商品列表
		getShopGoods({
			shop_id : this.props.shop_id,
			sort: num,
			pageSize:10,
			page: num1
		}).then(res => {
			if(res.code === 1){
				this.setState({
					productList:this.state.productList.concat(res.data.data),
					currentPage: num1,
          lastPage: res.data.last_page
				})
			}
		})
	}
	componentDidMount(){
		if(this.props.sort === 2) {
			this.show(1)
		} else {
			this.show(0)
		}
		let that=this;
    let i=1;
    window.onscroll= function(){
    	if (document.documentElement.scrollTop >= 118) {
				that.props.fixedNav('guding')
			} else {
				that.props.fixedNav('')
			}
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        that._getShopGoods(that.state.sort,i++)
      }else{
      }
    }
	}
	render(){
		return(
			<div className="company_product">
				<div className="product_nav">
					{
						this.state.titleList.map((item,index) => {
							return(
								<div className={this.state.list === index && 'active'} onClick={this.show.bind(this,index)} key={index}>{item}
									{index === 2 ? <span className={this.state.color3}></span> : ''}
								</div>
							)
						})
					}
					<div><Link to={
						{
							pathname:'/company/companyclassify',
							state:{shop_id : this.props.shop_id}
						}
					}><span className="glyphicon glyphicon-list"></span>商品分类</Link></div>
				</div>
				<div className="pro_content">
					{
						this.state.productList.map((item,index) =>{
							return (
                <LazyLoad offsetTop={200} key={index} height={0}>
                  <Card shopDetail={{...item, hide: false}}/>
                </LazyLoad>
              )
						})
					}
				</div>
				<div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板，没有更多了！ ————</div>
			</div>
		)
	}
}